window.addEventListener("load", function () {
	//   功能二：API次数test-frequency动态渲染
	// 1.获取后台数据
	const apidata = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	//    遍历拼接为html结构
	// 3.将html结构放入指定位置
	apidata.forEach(function (v) {
		$(
			".test-frequency"
		).innerHTML += `<p data-price=${v.price} data-unitPrice=${v.unitPrice}>${v.times}次</p>`;
	});
	// 给默认第一个p增加激活样式
	$(".test-frequency p")[1].classList.add("active");
	// 默认显示r-price给第一个价格

	$(".r-price").innerHTML = `<span class="fontwtb clor-red font18">${
		$(".test-frequency p")[1].dataset.price
	}</span>
	（约${$(".test-frequency p")[1].dataset.unitprice}元/次），仅限企业实名购买`;
	// 功能一：点击test-frequency区增加激活样式
	// 获取相关节点
	$(".test-frequency p");
	console.log($(".test-frequency p"));
	$(".test-frequency p").forEach(function (v) {
		// 绑定点击事件、
		v.addEventListener("click", function () {
			if (!this.classList.contains("default")) {
				$(".test-frequency p").forEach(function (item) {
					item.classList.remove("active");
				});
				this.classList.add("active");
				// 功能三，点击按钮，在下方联动价格次数
				$(
					".r-price"
				).innerHTML = `<span class="fontwtb clor-red font18">${this.dataset.price}</span>（约${this.dataset.unitprice}元/次），仅限企业实名购买`;
			}
		});
	});

	// 功能四：点击Tab栏激活对应样式
	// // 1.获取相关节点
	$(".tabList li");
	// 给每个li绑定事件
	$(".tabList li").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.先排他移出所欲激活样式
			$(".tabList li").forEach(function (item, index) {
				item.classList.remove("active");
				$(".contentLf div")[index].classList.remove("on");
			});
			// 再给自己增加激活样式
			this.classList.add("active");
			$(".contentLf div")[i].classList.add("on");
		});
	});

	//配置
	const config = {
		selector: "#particle",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "#000", //点颜色
		stroke: "216, 216, 216", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
});
